<template>
  <div
    ref="simulatorMainRef"
    class="simulator_main"
    :style="'--color:' + ztColor + ';--color2:' + color2"
  >
    <div class="location zjtd" :style="{ background: navBj }">
      <div class="flex header_left">
        <img
          :src="miniConfig.path + '/ic_change.png'"
          mode="widthFix"
          class="locationImg"
        >
        <img
          :src="miniConfig.path + '/ic_saoma@2x.png'"
          mode="widthFix"
          class="locationImg"
        >
      </div>
    </div>
    <div
      class="contents"
      :style="{
        background:
          'linear-gradient(180deg,' + themeHead + ' 0%, #F7F7F7 100%)',
      }"
    >
      <div style="height: 188px" />
      <template v-for="em in moduleList">
        <!-- banner -->
        <div
          v-if="
            em.code == 'M_SHOP_BANNER' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_BANNER_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <el-carousel height="300px" arrow="never">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img
                style="width: 100%; height: 100%"
                :src="item.icon || item.imageFullPath"
                alt=""
              >
            </el-carousel-item>
          </el-carousel>
          <template v-if="bannerConig.style == '2'">
            <div class="df venue_info">
              <img :src="venueInfo.showLogo">
              <div class="content">
                <div class="title">{{ venueInfo.name }}</div>
                <div>
                  {{ translate("businessHours") }}：<template
                    v-if="venueInfo.openTimeStart"
                  >{{
                    `${venueInfo.openTimeStart} ~ ${venueInfo.openTimeEnd}`
                  }}</template>
                </div>
              </div>
              <div class="btn">{{ translate("qiehuan") }}</div>
            </div>
            <div class="venue_ads">
              <div class="ads">
                {{ venueInfo.address }}{{ venueInfo.detailedAddress }}
              </div>
              <div class="btns">
                <div class="item">
                  <img
                    :src="miniConfig.path + '/home_ic_location.png'"
                    alt=""
                  >
                  <span>{{ translate("navtarget") }}</span>
                </div>
                <div class="item">
                  <img
                    class="phone"
                    :src="miniConfig.path + '/ic_dianhua.png'"
                    alt=""
                  >
                  <span>{{ translate("telephone") }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 通知 -->
        <div
          v-if="
            em.code == 'M_SHOP_NOTICE' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_NOTICE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="gxnotice">
            <img
              :src="miniConfig.path + '/home_ic_notice.png'"
              mode="widthFix"
            >
            <div class="notion_xian" />
            <div class="notion_cnt" />
          </div>
        </div>
        <!-- 教练风采 -->
        <div
          v-if="
            em.code == 'M_SHOP_TEACHER' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_TEACHER_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div v-if="em.name" class="uniDbt">
            <div class="left">
              {{ em.name }}
            </div>
          </div>
          <TeacherList :config="teacherConfig" />
        </div>
        <!-- 功能入口 -->
        <div
          v-if="
            em.code == 'M_SHOP_FUNCTION' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_FUNCTION_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div v-if="em.name" class="uniDbt">
            <div class="left">
              {{ em.name }}
            </div>
          </div>
          <div class="service_box mb2">
            <div
              v-for="item in modulesConfig.venueContent.customList.filter(
                (i) => i.isSelect == '1'
              )"
              :key="item.id"
              class="service_box_item"
              :class="'w' + modulesConfig.content.rowNum"
            >
              <div class="service_box_iteM_SHOP_icon">
                <img :src="item.icon">
              </div>
              <span class="service_box_iteM_SHOP_span">{{ item.title }}</span>
            </div>
          </div>
        </div>
        <!-- 课程 -->
        <div
          v-if="
            em.code == 'M_SHOP_COURSE' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_COURSE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>{{ translate("ckgd") }}<i
              class="el-icon-arrow-right"
            /></span>
          </div>
          <KcList :config="hotCourseConfig" />
        </div>
        <!-- 套餐 -->
        <div
          v-if="
            venueConfig &&
              em.code == 'M_SHOP_MEALS' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_MEALS_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3 site_wrap"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>{{ translate("ckgd") }}<i
              class="el-icon-arrow-right"
            /></span>
          </div>
          <TcList :config="hotMealConfig" />
        </div>
        <!-- 运动 -->
        <div
          v-if="
            venueConfig &&
              em.code == 'M_SHOP_KNOWLEDGE' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_KNOWLEDGE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>{{ translate("ckgd") }}<i
              class="el-icon-arrow-right"
            /></span>
          </div>
          <YdList :config="sportsConfig" />
        </div>
        <!-- 活动 -->
        <div
          v-if="
            venueConfig &&
              em.code == 'M_SHOP_ACTIVITY' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_ACTIVITY_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>{{ translate("ckgd") }}<i
              class="el-icon-arrow-right"
            /></span>
          </div>
          <HdList :config="activityConfig" />
        </div>
        <!-- 限时秒杀 -->
        <div
          v-if="
            venueConfig &&
              em.code == 'M_SHOP_SECKILL' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_SECKILL_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <Seckill :config="seckillConfig" />
        </div>
        <div
          v-if="
            em.code == 'M_SHOP_SECDISCOUNT' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_SECDISCOUNT_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <Discount :config="discountConfig" />
        </div>
        <!-- M_SHOP_VENUE -->
        <div
          v-if="
            venueConfig &&
              em.code == 'M_SHOP_VENUE' &&
              em.content.isDisplay == '1' &&
              em.isDeleted == '0'
          "
          ref="M_SHOP_VENUE_Ref"
          :key="em.code"
          :class="{ border: activeItemTemp.code == em.code }"
          class="wCard mb3"
        >
          <div class="uniDbt df_sb">
            <div>
              <span>{{ em.name }}</span>
            </div>
            <span>{{ translate("ckgd") }}<i
              class="el-icon-arrow-right"
            /></span>
          </div>
          <div
            v-for="(g, h) in hotVenList"
            :key="h"
            class="venue_item mb3 flex"
          >
            <img class="logoImg" :src="g.icon || g.showLogo">
            <div class="cont">
              <div style="font-size: 30px; font-weight: 600; color: #333">
                {{ g.title || g.name }}
              </div>
              <div
                v-if="venConfig.content.param.indexOf('1') > -1"
                class="mt10"
                style="font-size: 26px; color: #666"
              >
                {{ translate("businessHours") }}：{{
                  g.openTimeStart
                    ? g.openTimeStart
                    : g.bean && g.bean.openTimeStart
                      ? g.bean.openTimeStart
                      : ""
                }}
                ~
                {{
                  g.openTimeEnd
                    ? g.openTimeEnd
                    : g.bean && g.bean.openTimeEnd
                      ? g.bean.openTimeEnd
                      : ""
                }}
              </div>
              <div
                v-if="venConfig.content.param.indexOf('2') > -1"
                class="mt10"
                style="font-size: 26px; color: #666"
              >
                {{ translate("jyxm") }}：{{
                  g.projectName
                    ? g.projectName
                    : g.bean && g.bean.projectName
                      ? g.bean.projectName
                      : ""
                }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import KcList from './show/kcList.vue'
import HdList from './show/hdList.vue'
import YdList from './show/ydList.vue'
import TcList from './show/tcList.vue'
import TeacherList from './show/teacher.vue'
import Seckill from './show/seckill.vue'
import Discount from './show/Discount.vue'

import { venueList, getMiniSeckill, getMiniBanners, getProjectListb, getHotCourseList, getMiniMeal, getSportList, getNearActivity, getTeacherAllList } from '@/api'
export default {
  components: {
    HdList,
    YdList,
    TcList,
    KcList,
    TeacherList,
    Seckill,
    Discount
  },
  props: {
    config: {
      type: Array,
      default: () => []
    },
    venueInfo: {
      type: Object,
      default: () => ({})
    },
    glaboConfig: {
      type: Object,
      default: () => ({})
    },
    activeItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeItemTemp: {},
      ztColor: '#435ebe',
      color2: '#4167C1',
      navBj: '',
      themeHead: '#fff',
      venueName: '',
      hotItems: [{
        rowNum: 2,
        paramShow: []
      }, {
        rowNum: 2,
        paramShow: []
      }],
      hotVenList: [],
      moduleList: [],
      venChange: [],
      bannerList: [],
      bannerConig: {},
      bannerListTemp: [],
      venListTemp: [],
      modulesConfig: {
        content: {},
        venueContent: {
          customList: []
        }
      },
      venueConfig: {},

      hotItemConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      hotItemsTemp: [],

      hotCourseConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      venConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      teacherConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      CourseTemp: [],

      hotMealConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      mealTemp: [],

      sportsConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      sportTemp: [],

      seckillConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      seckillTemp: [],
      discountConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      discountTemp: [],

      activityConfig: {
        venueContent: {
          customList: []
        },
        content: {
          param: ''
        }
      },
      activityTemp: []

    }
  },
  computed: {
    xqBox() {
      return this.$refs.simulatorMainRef
    }
  },
  watch: {
    config: {
      handler: function(newValue) {
        this.moduleList = [...this.config]
      },
      immediate: true,
      deep: true
    },
    glaboConfig: {
      handler: function(newValue) {
        this.miniConfig = newValue
        this.ztColor = newValue.color1
        this.color2 = newValue.color2
        // this.themeHead = newValue.color2
      },
      immediate: true,
      deep: true
    },
    activeItem: {
      handler: function(newValue) {
        this.activeItemTemp = newValue
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.xqBox.addEventListener('scroll', this.handleScroll)
    })
    this.$bus.$on('simulatorScoll', (val) => {
      if (val.content.isDisplay === '0' || val.isDeleted === '1') return
      val = val.code + '_Ref'
      this.$nextTick(function() {
        const scrollElem = this.$refs.simulatorMainRef // 对应ref的命名
        const scrollElem2 = this.$refs[val][0] // 对应ref的命名
        if (scrollElem && scrollElem.scrollTo) {
          scrollElem.scrollTo({ top: scrollElem2.offsetTop - 180, behavior: 'smooth' })
        }
        // scrollElem.scrollTo({ top: scrollElem2.offsetTop - 180, behavior: 'smooth' })
      })
    })
    this.$bus.$on('miniBannerChange', (val, list, showContent, content) => {
      if (val === '2') {
        this.bannerList = list || []
      } else {
        this.bannerList = [...this.bannerListTemp]
      }
      if (showContent.indexOf('1') > -1) {
        this.themeHead = this.glaboConfig.color2
      } else {
        this.themeHead = '#fff'
      }
      this.bannerConig = { ...content }
    })
    this.$bus.$on('venChange', (val, config) => {
      if (val === '2') {
        this.venConfig = config || {}
        this.hotVenList = [...config.venueContent.customList]
      } else {
        this.venConfig = config
        this.hotVenList = [...this.venListTemp]
        // this.venConfig.venueContent.customList = [...this.venListTemp]
      }
    })
    this.$bus.$on('miniHotItemsChange', (val, config) => {
      if (val === '2') {
        this.hotItemConfig = config || {}
      } else {
        this.hotItemConfig = config
        this.hotItemConfig.venueContent.customList = [...this.hotItemsTemp]
      }
    })
    this.$bus.$on('miniHotCourseChange', (val, config) => {
      if (val === '2') {
        this.hotCourseConfig = config || {}
      } else {
        this.hotCourseConfig = config
        this.hotCourseConfig.venueContent.customList = [...this.CourseTemp]
      }
    })
    this.$bus.$on('miniHotMealChange', (val, config) => {
      if (val === '2') {
        this.hotMealConfig = config || {}
      } else {
        this.hotMealConfig = config
        this.hotMealConfig.venueContent.customList = [...this.mealTemp]
      }
    })
    this.$bus.$on('miniTeacherChange', (val, config) => {
      if (val === '2') {
        this.teacherConfig = config || {}
      } else {
        this.teacherConfig = config
        this.teacherConfig.venueContent.customList = [...this.teacherTemp]
      }
    })
    this.$bus.$on('miniSeckillChange', (val, config) => {
      if (val === '2') {
        this.seckillConfig = config || {}
      } else {
        this.seckillConfig = config
        this.seckillConfig.venueContent.customList = [...this.seckillTemp]
      }
    })
    this.$bus.$on('miniDiscountChange', (val, config) => {
      if (val === '2') {
        this.discountConfig = config || {}
      } else {
        this.discountConfig = config
        this.discountConfig.venueContent.customList = [...this.discountTemp]
      }
    })
    this.$bus.$on('miniSportChange', (val, config) => {
      if (val === '2') {
        this.sportsConfig = config || {}
      } else {
        this.sportsConfig = config
        this.sportsConfig.venueContent.customList = [...this.sportTemp]
      }
    })
    this.$bus.$on('miniActiveChange', (val, config) => {
      if (val === '2') {
        this.activityConfig = config || {}
      } else {
        this.activityConfig = config
        this.activityConfig.venueContent.customList = [...this.activityTemp]
      }
    })
    this.$bus.$on('miniModulesChange', (val, list) => {
      this.modulesConfig.content.rowNum = Number(val)
      this.modulesConfig.venueContent.customList = [...list]
    })
    this.$bus.$on('miniVenuebookChange', (val) => {
      this.venueConfig = { ...val }
    })
  },
  created() {
    this.initHomePage()
  },
  methods: {
    async initHomePage() {
      try {
        const resultAll = await Promise.all([
          getMiniBanners({ param: { isRec: '1' }, pagination: { page: 1, rows: 5 }}),
          getProjectListb({ param: { isRec: '1', status: '1', channel: '01' }, pagination: { page: 1, rows: 9 }}),
          getHotCourseList({ param: { isRec: '1', channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getMiniMeal({ param: { status: '1', channel: '01' }, pagination: { page: 1, rows: 6 }}),
          // isRec: '1',
          getSportList({ param: { channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getNearActivity({ param: { isRec: '1', channel: '01' }, pagination: { page: 1, rows: 6 }}),
          getTeacherAllList({ param: { status: '1', isiOnJob: '1' }, pagination: { page: 1, rows: 10 }}),
          getMiniSeckill({ param: { isRec: '1', type: '0' }, pagination: { page: 1, rows: 6 }}),
          getMiniSeckill({ param: { isRec: '1', type: '1' }, pagination: { page: 1, rows: 6 }}),
          venueList({ param: { isRec: '1', openStatus: '1' }, pagination: { page: 1, rows: 6 }})
        ])
        this.bannerListTemp = resultAll[0].record || []
        this.hotItemsTemp = [...resultAll[1].recordList] || []
        this.CourseTemp = [...resultAll[2].recordList] || []
        this.mealTemp = [...resultAll[3].recordList] || []
        this.sportTemp = [...resultAll[4].recordList] || []
        this.activityTemp = [...resultAll[5].recordList] || []
        this.teacherTemp = [...resultAll[6].recordList] || []
        this.seckillTemp = [...resultAll[7].recordList] || []
        this.discountTemp = [...resultAll[8].recordList] || []
        this.venListTemp = [...resultAll[9].recordList] || []
      } catch (error) {
        console.log(error)
      }
      this.moduleList.forEach(item => {
        if (item.code === 'M_SHOP_BANNER') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            this.bannerList = [...item.venueContent.customList]
          } else {
            this.bannerList = [...this.bannerListTemp]
          }
          this.bannerConig = { ...item.content }
          if (item.content.param.indexOf('1') > -1) {
            this.themeHead = this.glaboConfig.color2
          } else {
            this.themeHead = '#fff'
          }
        } if (item.code === 'M_SHOP_VENUE') {
          this.venConfig = item
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            this.hotVenList = [...item.venueContent.customList]
            // this.hotVenList = [...this.venListTemp]
          } else {
            this.hotVenList = [...this.venListTemp]
          }
        } else if (item.code === 'M_SHOP_FUNCTION') {
          this.modulesConfig = { ...item }
        } else if (item.code === 'M_SHOP_MEALS') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.mealTemp
            }
          }
          this.hotMealConfig = { ...item }
        } else if (item.code === 'M_SHOP_COURSE') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.CourseTemp
            }
          }
          this.hotCourseConfig = { ...item }
        } else if (item.code === 'M_SHOP_SECKILL') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.seckillTemp
            }
          }
          this.seckillConfig = { ...item }
        } else if (item.code === 'M_SHOP_SECDISCOUNT') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.discountTemp
            }
          }
          this.discountConfig = { ...item }
        } else if (item.code === 'M_SHOP_ACTIVITY') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.activityTemp
            }
          }
          this.activityConfig = { ...item }
        } else if (item.code === 'M_SHOP_KNOWLEDGE') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.sportTemp
            }
          }
          this.sportsConfig = { ...item }
        } else if (item.code === 'M_SHOP_TEACHER') {
          if (item.venueContent && item.venueContent.customList && item.venueContent.customList.length > 0) {
            // item.venueContent.customList = item.venueContent.customList || []
          } else {
            item.venueContent = {
              ...item.venueContent,
              customList: this.teacherTemp
            }
          }
          this.teacherConfig = { ...item }
        }
      })
    },
    returnTop() {
      this.$nextTick(function() {
        const scrollElem = this.$refs.main // 对应ref的命名
        const woGn = this.$refs.woGn
        scrollElem.scrollTo({ top: woGn.scrollHeight, behavior: 'smooth' })
      })
    },
    handleScroll() {
      // 获取dom滚动距离
      const scrollTop = this.xqBox.scrollTop
      // 获取可视区高度
      // const offsetHeight = this.xqBox.offsetHeight
      // // 获取滚动条总高度
      // const scrollHeight = this.xqBox.scrollHeight
      // // xqConList 为目录内容列表
      let topOpacity = scrollTop / 100 - 0.4
      if (scrollTop < 40) {
        topOpacity = 0
      } else if (topOpacity >= 1) {
        topOpacity = 1
      }
      this.navBj = `rgba(255,255,255,${topOpacity})`
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.venue_ads {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  .ads {
    flex: 1;
  }
  .btns {
    display: flex;
    padding: 0 20px;
    .item {
      img {
        width: 48px;
      }
      width: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.venue_info {
  padding: 30px;
  padding-left: 0;
  background-color: #fff;
  align-items: center;
  img {
    width: 80px;
    margin-right: 12px;
  }
  .content {
    flex: 1;
    .title {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 12px;
    }
  }
  .btn {
    border: 1px solid #e4e4e4;
    padding: 4px 6px;
  }
}

.w69 {
  // width: 690px;
  margin-left: auto;
  margin-right: auto;
}

.wCard {
  width: 100%;
  padding: 0 30px;
  font-size: 28px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.border {
  border: 4px solid $primaryColor;
}

.flex {
  display: flex;
  align-items: center;
}

.simulator_main {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 108px;

  &::-webkit-scrollbar {
    display: none;
  }
}

.contents {
  height: 500px;
  position: relative;
  .site_wrap {
    background-color: #fff;
    width: 690px;
    margin: 30px 30px;
  }
}

.location {
  z-index: 999;
  &.zjtd {
    height: 160px;
    padding: 0 30px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    padding-top: 88px;
    left: 0;
    width: 100%;
  }
  .header_left {
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    width: 160px;
    height: 66px;
    justify-content: center;
    align-items: center;
  }
  .locationImg {
    width: 36px;
    height: 36px;
    margin: 0 20px;
  }

  .locationName {
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: Medium;
    margin: 0 20px;
    color: #111111;
  }

  .locationIcon {
    width: 22px;
    height: 22px;
  }

  &.zts {
    .locationName {
      color: #333;
    }
  }
}

.gxnotice {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 30px;
  box-sizing: border-box;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-content: center;

  img {
    width: 38px;
    height: 38px;
    flex: none;
  }

  .notion_xian {
    width: 1px;
    height: 30px;
    background: #d9d9d9;
    margin: 0 20px;
    flex: none;
    overflow: hidden;
  }

  .notion_cnt {
    flex: 1;
    height: 42px;
    line-height: 42px;

    .notion_cnt_p {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      overflow: hidden;
      line-height: 42px;
      padding: 0;
      margin: 0;
    }
  }
}

.service_box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;

  .service_box_item {
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;

    &.w2 {
      width: 50%;
    }

    &.w3 {
      width: 33.33%;
    }

    &.w4 {
      width: 25%;
    }

    &.w5 {
      width: 20%;
    }

    .service_box_iteM_SHOP_icon {
      width: 88px;
      height: 88px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .service_box_iteM_SHOP_span {
      color: #7f7f7f;
      font-size: 25px;
      margin-top: 10px;
    }
  }
}

.hdList {
  display: flex;
  flex-wrap: wrap;
  width: 690px;

  .hdli {
    border-radius: 8px;
    margin-right: 15px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    margin-right: 20px;
    .hdWz {
      font-size: 30px;
      color: #222222;
      line-height: 1;
      margin-top: 46px;
    }

    &.w2 {
      width: 335px;
      height: 384px;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .kuan {
        width: 146px;
        height: 146px;
      }
    }

    &.w3 {
      width: 220px;
      height: 252px;
      margin-right: 15px;

      &:nth-child(3n) {
        margin-right: 0;
      }
      .kuan {
        width: 96px;
        height: 96px;
      }
    }

    &.w4 {
      width: 157.5px;
      height: 180px;
      &:nth-child(4n) {
        margin-right: 0;
      }
      .kuan {
        width: 68px;
        height: 68px;
      }
      .hdWz {
        margin-top: 35px;
      }
    }

    &.wu {
      background: #fff !important;
    }

    .kuan {
      display: block;
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: 100%;
      }
    }
    &.on {
      .kuan {
        border: none;
        background-color: $Color;
      }

      .hdWz {
        color: $Color;
      }
    }
  }
}
.venue_item {
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  .logoImg {
    width: 120px;
    margin-right: 20px;
    flex: none;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
  }
}
</style>
